<template>
	<view class="">
		<view class="page d-flex flex-column j-center bz px-3" :style="'background:url('+background+');background-size:100%,100%;'"
		 style="background-size: 100% 100%;">
			<view class="bz p-3 b-radius1 bg-white">
				<view class="title pb-2">
					预约服务
				</view>
				<view class="cu-form-group bz p-0">
					<picker @change="technicianChange" :value="technicianIndex" :range="technicianNameList">
						<view class="picker">
							{{technicianName}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group bz p-0" style="border-bottom: 1px solid #E5E5E5;">
					<picker @change="projectChange" :value="serviceNameIndex" :range="serviceNameList">
						<view class="picker">
							{{serviceName}}
						</view>
					</picker>
				</view>
				<view class="d-flex flex-nowrap a-center py-2">
					<view class="date">日期</view>
					<view class=" pl-1">
						<picker mode="date" :value="date" start="2020-09-01" end="2030-09-01" @change="DateChange">
							<view class="picker date_num">
								{{date}}
							</view>
						</picker>
					</view>
				</view>
				<scroll-view scroll-y="true" class="scroll-Y" style="height: 400rpx;">
					<view class="time_list mb-2" v-for="(item,index) in timeList" :key="index" @tap="selectServiceTime(0,index)"
					 :class="(serviceTimeIndex==index&&0==selectServicePage?'check':'')+(areadyAppointments.indexOf(item.name)>=0?' check1':'')"
					 style="float: left;margin-left: 15rpx;">{{item.name}}</view>
				</scroll-view>

				<view class="b-border">
					<button class="cu-btn lg mt-3" @tap="send">预约</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timeList: [{
						name: '11:30-12:00'
					},
					{
						name: '12:00-12:30'
					},
					{
						name: '12:30-13:00'
					},
					{
						name: '13:00-13:30'
					},
					{
						name: '13:30-14:00'
					},
					{
						name: '14:00-14:30'
					},
					{
						name: '14:30-15:00'
					}, {
						name: '15:00-15:30'
					}, {
						name: '15:30-16:00'
					}, {
						name: '16:00-16:30'
					}, {
						name: '16:30-17:00'
					}, {
						name: '17:00-17:30'
					},
					{
						name: '17:30-18:00'
					}, {
						name: '18:00-18:30'
					}, {
						name: '18:30-19:00'
					}, {
						name: '19:00-19:30'
					}, {
						name: '19:30-20:00'
					}, {
						name: '20:00-20:30'
					}, {
						name: '20:30-21:00'
					}, {
						name: '21:00-21:30'
					}, {
						name: '21:30-22:00'
					}, {
						name: '22:00-22:30'
					}
				],
				areadyAppointments: '',
				technicianIndex: -1,
				serviceNameList: [],
				technicianName: '请选择睡眠师',
				serviceName: '请选择服务',
				technicianIdList: [],
				technicianNameList: [],
				serviceNameIndex: -1,
				selectServicePage: -1,
				time: [],
				serviceTimeIndex: -1,
				background: '/static/bg-1.png',
				date: '',
			}
		},
		onLoad() {
			uni.removeStorageSync('selectedTechnicianId');
			uni.removeStorageSync('selectedTechnicianName');
			var that = this;
			// #ifdef  MP-WEIXIN
			let base64 = wx.getFileSystemManager().readFileSync(this.background, 'base64');
			that.background = 'data:image/jpg;base64,' + base64;
			// #endif

			var date = new Date();
			var year = date.getFullYear(); //获取完整的年份(4位)
			var getMonth = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
			var getDate = date.getDate() + '' //获取当前日(1-31)
			this.date = year + '-' + getMonth + '-' + getDate.padStart(2, "0");

		},
		onShow() {
			if (!uni.getStorageSync('user')) {
				// uni.navigateTo({
				// 	url: "../login/login"
				// })

				uni.showToast({
					title: '请先登录',
					icon: "none"
				});
			}


			if (uni.getStorageSync('selectedTechnicianName') != null && uni.getStorageSync('selectedTechnicianName') != '') {
				this.technicianName = uni.getStorageSync('selectedTechnicianName');
				for (let i = 0; i < this.technicianNameList.length; i++) {
					if (this.technicianNameList[i] == this.technicianName) {
						this.technicianIndex = i;
					}
				}
			}

			this.timeList = [{
					name: '11:30-12:00'
				},
				{
					name: '12:00-12:30'
				},
				{
					name: '12:30-13:00'
				},
				{
					name: '13:00-13:30'
				},
				{
					name: '13:30-14:00'
				},
				{
					name: '14:00-14:30'
				},
				{
					name: '14:30-15:00'
				}, {
					name: '15:00-15:30'
				}, {
					name: '15:30-16:00'
				}, {
					name: '16:00-16:30'
				}, {
					name: '16:30-17:00'
				}, {
					name: '17:00-17:30'
				},
				{
					name: '17:30-18:00'
				}, {
					name: '18:00-18:30'
				}, {
					name: '18:30-19:00'
				}, {
					name: '19:00-19:30'
				}, {
					name: '19:30-20:00'
				}, {
					name: '20:00-20:30'
				}, {
					name: '20:30-21:00'
				}, {
					name: '21:00-21:30'
				}, {
					name: '21:30-22:00'
				}, {
					name: '22:00-22:30'
				}
			];


			this.getViewInfo();
		},
		methods: {
			queryAreadyAppointmentList() {
				if (uni.getStorageSync('user') == null || uni.getStorageSync('user') == '') {
					uni.showToast({
						title: '请先登录',
						icon: "none"
					});
					return;
				}
				var arr = {
					openId: uni.getStorageSync('user').openId,
					serviceDay: this.date,
					technicianId: this.technicianIdList[this.technicianIndex]
				};
				arr = JSON.stringify(arr)
				this.$http({
					url: '/IWeiXinService.queryAppointmentListBySerivceDay',
					method: 'post',
					data: arr
				}).then((res) => {
					if (res.code == 0) {
						this.areadyAppointments = '';
						for (let i = 0; i < res.data.length; i++) {
							this.areadyAppointments = this.areadyAppointments + res.data[i].serviceTime.split(' ')[1] + ',';
						}
						console.log(this.areadyAppointments);
					} else if (res.code == '100003') {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
						setTimeout(function() {
							uni.navigateTo({
								url: "/pages/bind_phone/bind_phone"
							});
						}, 1000)
					} else if (res.code == '100004') {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
						// setTimeout(function() {
						// 	uni.navigateTo({
						// 		url: "/pages/login/login"
						// 	})
						// }, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}).catch((err) => {
					console.log(err)

				})
			},
			DateChange(e) {
				this.date = e.detail.value;
				if (this.technicianIndex != -1 && this.serviceNameIndex != -1) {
					this.queryAreadyAppointmentList();
				}
			},
			technicianChange(e) {
				this.technicianIndex = e.detail.value
				this.technicianName = this.technicianNameList[e.detail.value];

				if (this.technicianIndex != -1 && this.serviceNameIndex != -1) {
					this.queryAreadyAppointmentList();
				}
			},
			projectChange(e) {
				this.serviceNameIndex = e.detail.value
				this.serviceName = this.serviceNameList[e.detail.value];
				if (this.technicianIndex != -1 && this.serviceNameIndex != -1) {
					this.queryAreadyAppointmentList();
				}
			},
			selectServiceTime(i, index) {
console.log(i + '  '+ index + JSON.stringify(this.timeList));
				if (this.areadyAppointments.indexOf(this.timeList[i].name) > -1) {
					uni.showToast({
						title: '此时间段已被预约',
						icon: "none"
					});
				} else {
					this.selectServicePage = i;
					this.serviceTimeIndex = index;
				}
			},
			getViewInfo() {
				var arr = {
					curr: 1,
					pageSize: 100
				};
				arr = JSON.stringify(arr)
				console.log(arr)
				this.$http({
					url: '/IWeiXinService.queryTechnicianList',
					method: 'post',
					data: arr
				}).then((res) => {
					if (res.code == 0) {
						var technicianIdList = [];
						this.technicianNameList = [];
						for (var i = 0; i < res.data.length; i++) {
							technicianIdList.push(res.data[i].id);
							this.technicianNameList.push(res.data[i].name);
						}
						this.technicianIdList = technicianIdList;
						this.getWork();
					} else if (res.code == '100003') {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
						setTimeout(function() {
							uni.navigateTo({
								url: "/pages/bind_phone/bind_phone"
							});
						}, 1000)
					} else if (res.code == '100004') {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}).catch((err) => {
					console.log(err)

				})
			},
			getWork() {
				var arr = {
					curr: 1,
					pageSize: 100
				};
				arr = JSON.stringify(arr)
				console.log(arr)
				this.$http({
					url: '/IWeiXinService.queryProjectList',
					method: 'post',
					data: arr
				}).then((res) => {
					console.log(res)
					if (res.code == '0') {
						this.serviceNameList = [];
						for (var i = 0; i < res.data.length; i++) {
							this.serviceNameList.push(res.data[i].projectName)
						}
					} else if (res.code == '100004') {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}).catch((err) => {
					console.log(err)

				})
			},
			//提交
			send() {
				if (uni.getStorageSync('user') == null || uni.getStorageSync('user') == '') {
					uni.showToast({
						title: '请先登录',
						icon: "none"
					});

					return;
				}
				if (this.technicianIndex == -1) {
					uni.showToast({
						title: "请选择您要预约的睡眠师",
						icon: "none"
					})
					return;
				}

				if (this.serviceNameIndex == -1) {
					uni.showToast({
						title: "请选择您要预约的服务",
						icon: "none"
					})
					return;
				}

				if (this.serviceTimeIndex == -1) {
					uni.showToast({
						title: "请选择预约时间段",
						icon: "none"
					})
					return;
				}
				this.queryAreadyAppointmentList();

				uni.showLoading({
					title: "提交中..."
				})
				console.log(this.selectServicePage + " " + this.serviceTimeIndex + ' ' + JSON.stringify(this.timeList[this.serviceTimeIndex]));
				var arr = {
					openId: uni.getStorageSync('user').openId,
					technicianId: this.technicianIdList[this.technicianIndex],
					technicianName: this.technicianNameList[this.technicianIndex],
					serviceName: this.serviceName,
					serviceTime: this.date + ' ' + this.timeList[this.serviceTimeIndex].name,
				};
				arr = JSON.stringify(arr)

				this.$http({
					url: '/IWeiXinService.appointmentAdd',
					method: 'post',
					data: arr
				}).then((res) => {
					uni.hideLoading();
					if (res.code == '0') {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});

						setTimeout(function() {
							uni.navigateBack()
						}, 2000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}).catch((err) => {
					console.log(err)

				})

			}
		}

	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		width: 100%;

	}

	.title {
		text-align: center;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}

	.picker {
		font-size: 30rpx !important;
		font-family: PingFang SC !important;
		font-weight: 400 !important;
		color: rgba(51, 51, 51, 1) !important;
		text-align: left !important;
	}

	.date {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(135, 135, 135, 1);
	}

	.date_num {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.time_list {
		width: 190rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: rgba(226, 226, 226, 1);
		border-radius: 30rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		text-align: center;
	}

	.d-none {
		display: none;
	}

	.check {
		background: rgba(118, 64, 131, 1);
		color: #fff;
	}

	.check1 {
		background: #AEEEEE;
		color: #fff;
	}

	.b-border {
		border-top: 1px solid rgba(229, 229, 229, 1);
	}

	.cu-btn {
		background: rgba(117, 62, 130, 1);
		width: 100%;
		color: #fff;
		letter-spacing: 5rpx;
	}

	.date_num {
		font-size: 22rpx !important;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}
</style>
